<template>
	<view class="content">
		<view class="item-box">
			<view class="item" v-for="(item,i) in viewData" :key="i" @click="gotoXiangqing(item.record_id)">
				<view class="title">
					<view class="p">
						单号: {{item.name}}
					</view>
					<view class="p">
						状态: {{item.state}}
					</view>
				</view>
				<view class="message">
					<view class="p">
						从 {{item.location_id}}
					</view>
					<view class="">
						-->
					</view>
					<view class="p">
						到 {{item.location_dest_id}}
					</view>
				</view>
				<view class="middia">
					<view class="p">
						联系人 {{item.partner_id}}
					</view>
					<view class="span">

					</view>
					<view class="p">
						作业类别 {{item.op_type}}
					</view>
				</view>

				<view class="logistics">
					<view class="top-company">
						<view class="p">
							物流 {{item.x_studio__2}}
						</view>
						<view class="p">
							费用 {{item.freight}}
						</view>
						<view class="p">
							付款方式 {{item.x_studio_field_subLy}}
						</view>
					</view>
					<view class="date">
						安排的日期 {{item.scheduled_date}}
					</view>
				</view>
				<view class="company">
					<view class="p">
						源单据 {{item.origin}}
					</view>

					<view class="p">
						公司 {{item.company_id}}
					</view>
				</view>

			</view>
		</view>
		<view class="no" v-if="noChanpin">
			暂时没有待入库产品
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		getShouHuoList
	} from '@/api/shouhuo.js'

	const noChanpin = ref(false)
	const viewData = ref([])
	const _getShouHuoList = () => {
		getShouHuoList().then((res) => {
			console.log(res);
			if (res.records_list.length == 0) {
				noChanpin.value = true
			} else {
				viewData.value = res.records_list
			}

		})
	}
	const gotoXiangqing = (id) => {
		uni.navigateTo({
			url: `/model/shouhuoModel/shouhuo_Message?id=${id}`
		})
	}
	onLoad(() => {
		_getShouHuoList()
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 10rpx;
		min-height: 100vh;
		background-color: #f5f5f5;

		.item-box {
			padding: 10rpx;

			.item {
				background-color: white;
				padding: 10rpx;
				border-radius: 10rpx;
				border: 1rpx solid gainsboro;
				margin-bottom: 20rpx;

				.title {
					padding: 0 0 10rpx 0;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid gainsboro;
				}

				.message {
					padding: 10rpx 0;
					display: flex;
					justify-content: space-around;
				}

				.middia {
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid gainsboro;
					display: flex;
					justify-content: space-around;

					.span {
						height: 40rpx;
						width: 1rpx;
						background-color: gainsboro;
					}
				}

				.logistics {
					font-size: 22rpx;

					.top-company {
						display: flex;
						justify-content: space-around;

						.span {
							height: 40rpx;
							width: 1rpx;
							background-color: gainsboro;
						}
					}

					.date {
						padding-top: 10rpx;
						padding-bottom: 10rpx;
						border-bottom: 1rpx solid gainsboro;
						text-align: center;
					}
				}

				.company {}
			}
		}
	
		.no {
			padding: 40rpx;
			text-align: center;
		}
	}
</style>